<template>
  <div id="userInfo" class="userInfo">
	  <group>
		  <cell :title="name" @click.native="chooseImage">
			  <img v-if="head_img == ''" slot="icon" width="80" style="display:block;margin-right:10px;" src="@/assets/profile/default_header.svg">
			  <img v-else slot="icon" width="60" style="display:block;margin-right:10px;" :src="head_img">
		  </cell>
	  </group>
	  <input type="file" @change="fileCb" class="uploadInput" ref="uploadInput" hidden>
  </div>
</template>

<script>
	import bus from '@/event/eventBus'
  import {Divider, Card, Cell, Group} from 'vux'
  export default {
    name: "userInfo",
    components: {
      Divider,
      Card,
      Cell,
      Group
    },
    data() {
      return {
        name: '刘中海',
	      head_img: '',
	      fileBlob: ''
      }
    },
	  created: function () {
    	let _this = this
		  bus.$on("fileBlob", function (msg) {
			  _this.fileBlob = msg
		  })

    	let sysUser = this.$store.state.user.userModel.sysUser
		  let sysRoleList = this.$store.state.user.userModel.sysRoleList
		  let sysFile = this.$store.state.user.userModel.sysFile
		  if(sysUser){
			  this.name = sysUser.nickname
		  }

		  if(sysFile){
			  this.head_img = sysFile.file_url
		  }
	  },
	  methods: {
		  chooseImage() {
			  this.$refs.uploadInput.click();
		  },
		  fileCb(e) {
			  this.$router.push({ name: "imgCrop", params: { id: this.$store.state.user.userModel.sysUser.id, file: e.target.files[0], url: '/users'}})
		  }
	  }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/1px.less';

  .card-demo-flex {
    display: flex;
  }
  .card-demo-content01 {
    padding: 10px 0;
  }
  .card-padding {
    padding: 15px;
  }
  .card-demo-flex > div {
    flex: 1;
    text-align: center;
    font-size: 12px;
  }
  .card-demo-flex span {
    color: #f74c31;
  }

  .userInfo{
	  background: #8080800d;
    margin-top: 56px;
  }

	.userInfoCell{
		padding: 0 0 !important;
	}

	.userInfo_icon {
		width: 20px;
		display: block;
		margin-right: 25px;
		margin-left: 10px;
	}

	.userInfoCellGroup {
		border-radius: 0px !important;
	}

</style>
